<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta charset="utf-8">
        <meta name="renderer" content=webkit>
        <!-- 引入vue -->
        <script src="../js/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../js/jQyery.js"></script>
        <script src="../js/layer/layer.js"></script>

        <script src="../js/element/element.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../js/element/element.css">

        <link rel="stylesheet" href="../css/consoleCss.css">
        <script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.js"></script>
    </head>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <body>
        <div class="index_main"  onclick="hidediaolog()">
            <div class="index_maincontent">
                <div class="imc_right" id="content" v-cloak>
                  
                    <div class="console-all-box">
                        <div class="console-top-box">
                            <div class="console-text-box console-icon-base">
                                <div class="console-icon"></div>
                                <div class="console-text">
                                    <div class="console-text-val">{{ consoleTop.base }}<span>个</span></div>
                                    <div class="console-text-name">基地</div>
                                </div>
                            </div>
                            <div class="console-text-box console-icon-commodity">
                                <div class="console-icon"></div>
                                <div class="console-text">
                                    <div class="console-text-val">{{ consoleTop.commodity }}<span>件</span></div>
                                    <div class="console-text-name">商品</div>
                                </div>
                            </div>
                            <div class="console-text-box console-icon-customer">
                                <div class="console-icon"></div>
                                <div class="console-text">
                                    <div class="console-text-val">{{ consoleTop.customer }}<span>个</span></div>
                                    <div class="console-text-name">客户</div>
                                </div>
                            </div>
                            <div class="console-text-box console-icon-ewm">
                                <div class="console-icon"></div>
                                <div class="console-text">
                                    <div class="console-text-val">{{ consoleTop.ewm }}<span>个</span></div>
                                    <div class="console-text-name">生成二维码</div>
                                </div>
                            </div>
                            <div class="console-text-box console-icon-scanningVolume">
                                <div class="console-icon"></div>
                                <div class="console-text">
                                    <div class="console-text-val">{{ consoleTop.scanningVolume }}<span>次</span></div>
                                    <div class="console-text-name">扫描量</div>
                                </div>
                            </div>
                        </div>
                        <div class="console-center-box">
                            <div class="console-center-left-box">
                                <div class="console-farming-box">
                                    <div class="current-title-box">
                                        <div class="current-title-name">今日农事</div>
                                        <div class="farming-more-box"><span>更多</span><i class="el-icon-arrow-right"></i></div>
                                    </div>
                                    <div class="farming-table-box">
                                        <el-table
                                                :data="farmingTable"
                                                border
                                                style="width: 100%;"
                                                max-height="206">
                                            <el-table-column
                                                    prop="massif"
                                                    label="地块"
                                                    align="center"
                                                    min-width="80">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="type"
                                                    label="农业类型"
                                                    align="center"
                                                    min-width="100">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="classification"
                                                    align="center"
                                                    label="分类"
                                                    min-width="80">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="operationVolume"
                                                    align="center"
                                                    label="操作量"
                                                    min-width="110">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="Operator"
                                                    align="center"
                                                    label="操作人"
                                                    min-width="110">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="operationTime"
                                                    align="center"
                                                    label="操作时间"
                                                    min-width="140">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="taskStatus"
                                                    align="center"
                                                    label="任务状态"
                                                    min-width="110">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                                <div class="console-cost-box">
                                    <div class="current-title-box">
                                        <div class="current-title-name">生产成本统计</div>
                                    </div>
                                    <div class="cost-charts-box">
                                        <div id="cost-charts"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="console-center-right-box">
                                <div class="console-packing-box">
                                    <div class="current-title-box">
                                        <div class="current-title-name">包装状态</div>
                                    </div>
                                    <div class="packing-box packing-box-top">
                                        <div class="packing-text-Allbox">
                                            <div class="packing-text-icon"><img src="../img/packing-icon-1.png"></div>
                                            <div class="packing-text-box">
                                                <div class="packing-text-val">{{ packing.pack }}</div>
                                                <div class="packing-text-name">打包量</div>
                                            </div>
                                        </div>
                                        <div class="packing-text-Allbox">
                                            <div class="packing-text-icon"><img src="../img/packing-icon-2.png"></div>
                                            <div class="packing-text-box">
                                                <div class="packing-text-val">{{ packing.storage }}</div>
                                                <div class="packing-text-name">仓储</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="packing-box">
                                        <div class="packing-text-Allbox">
                                            <div class="packing-text-icon"><img src="../img/packing-icon-3.png"></div>
                                            <div class="packing-text-box">
                                                <div class="packing-text-val">{{ packing.forSale }}</div>
                                                <div class="packing-text-name">待销售</div>
                                            </div>
                                        </div>
                                        <div class="packing-text-Allbox">
                                            <div class="packing-text-icon"><img src="../img/packing-icon-4.png"></div>
                                            <div class="packing-text-box">
                                                <div class="packing-text-val">{{ packing.Sold }}</div>
                                                <div class="packing-text-name">已销售</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="console-plantingArea-box">
                                    <div class="current-title-box">
                                        <div class="current-title-name">作物种植面积</div>
                                    </div>
                                    <div class="plantingArea-charts-box">
                                        <div id="plantingArea-charts"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="cosole-bottom-box">
                            <div class="FarmingArrangements-box">
                                <div class="current-title-box">
                                    <div class="current-title-name">农事安排</div>
                                    <el-select v-model="FarmingArrangementsMouth" placeholder="请选择" :size="'small'">
                                        <el-option
                                                v-for="item in FarmingArrangementsOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="FarmingArrangements-charts-box">
                                    <div id="FarmingArrangements"></div>
                                </div>
                            </div>
                            <div class="ewmGenerate-box">
                                <div class="current-title-box">
                                    <div class="current-title-name">二维码生成/扫描量</div>
                                </div>
                                <div class="ewmGenerate-charts-box">
                                    <div id="ewmGenerate"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </body>
</html>
<script>
    
    
    var content=new Vue({
        el: '#content',
        data(){
            return {
                consoleTop: {
                    base: '4',
                    commodity: '56',
                    customer: '1596',
                    ewm: '16938',
                    scanningVolume: '16938'
                },
                farmingTable: [{
                    massif: '1号地块',
                    type: '常规农事',
                    classification: '间苗',
                    operationVolume: '全部',
                    Operator: '成都员工1',
                    operationTime: '2021/01/14',
                    taskStatus: '[已完成]'
                },{
                    massif: '1号地块',
                    type: '常规农事',
                    classification: '间苗',
                    operationVolume: '全部',
                    Operator: '成都员工1',
                    operationTime: '2021/01/14',
                    taskStatus: '[已完成]'
                },{
                    massif: '1号地块',
                    type: '常规农事',
                    classification: '间苗',
                    operationVolume: '全部',
                    Operator: '成都员工1',
                    operationTime: '2021/01/14',
                    taskStatus: '[已完成]'
                },{
                    massif: '1号地块',
                    type: '常规农事',
                    classification: '间苗',
                    operationVolume: '全部',
                    Operator: '成都员工1',
                    operationTime: '2021/01/14',
                    taskStatus: '[已完成]'
                },{
                    massif: '1号地块',
                    type: '常规农事',
                    classification: '间苗',
                    operationVolume: '全部',
                    Operator: '成都员工1',
                    operationTime: '2021/01/14',
                    taskStatus: '[已完成]'
                }],
                packing: {
                    pack: '150,626',
                    storage: '15,626',
                    forSale: '15,626',
                    Sold: '156,026'
                },
                FarmingArrangementsMouth: '2021-1',
                FarmingArrangementsOptions: [{
                    label: '2021-1',
                    value: '2021-1'
                },{
                    label: '2020-12',
                    value: '2020-12'
                },{
                    label: '2020-11',
                    value: '2020-11'
                },{
                    label: '2020-10',
                    value: '2020-10'
                }]
            }
        },
        computed: {

        },
        created() {

        },
        mounted(){
            this.init()
        },
        methods:{
            init() {
                this.getCostData();
                this.getPlantingArea();
                this.getFarmingArrangements();
                this.getEwmGenerate();
            },
            getCostData() {
                let myChart = echarts.init(document.getElementById('cost-charts'));
                let data = [{ name: "劳务成本", type: "bar", stack: '成本', data: [220, 182, 191, 234, 290, 330, 310, 234, 290, 330, 310], itemStyle: { color: "#2D8CF0" }, barWidth: 22 },
                    { name: "投入成本", type: "bar", stack: '成本', data: [150, 232, 201, 154, 190, 330, 410, 154, 190, 330, 410], itemStyle: { color: "#83D8E6" }, barWidth: 22 }];
                let timeData = ["200", "400", "600", "800", "1000", "1200", "1400", "1600", "1800", "2000", "2200"];
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: data.map(item => {
                            return item.name;
                        }),
                        right: 100,
                        itemGap: 20,
                        top: 0
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                        top: '14%'
                    },
                    xAxis: {
                        type: 'category',
                        // boundaryGap: false,
                        data: timeData,
                        axisTick: { show: false },
                        axisLine: { show: false },
                        axisLabel: {
                            color: "#999"
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: "#E0E0E0"
                            }
                        },
                        axisTick: { show: false },
                        axisLine: { show: false },
                        axisLabel: {
                            color: "#999"
                        }
                    },
                    series: data
                })
            },
            getPlantingArea() {
                let myChart = echarts.init(document.getElementById('plantingArea-charts'));
                let data = [
                    {value: 1048, name: '茄子', itemStyle: { color: "#83D8E6" }},
                    {value: 735, name: '白菜', itemStyle: { color: "#24C5A4" }},
                    {value: 580, name: '萝卜', itemStyle: { color: "#FFC941" }},
                    {value: 484, name: '黄瓜', itemStyle: { color: "#717AF6" }},
                    {value: 300, name: '西红柿', itemStyle: { color: "#92A3FE" }}
                ]
                function arrCount(arr) {
                    let count = 0
                    arr.forEach(item => {
                        count = count + item.value
                    })
                    return count
                }
                myChart.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        right: 100,
                        top: 'center',
                        height: 120,
                        itemGap: 30,
                        formatter(name) {
                            let count = arrCount(data)
                            //找到data中name和文本name值相同的对象
                            let val = data.filter(item => {
                                return item.name === name
                            })
                            let rate = ((val[0].value / count).toFixed(2)) * 100 + '%'
                            return name + '  ' + rate
                        }
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            center: ['22%', '50%'],
                            // radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            // emphasis: {
                            //     label: {
                            //         show: true,
                            //         fontSize: '40',
                            //         fontWeight: 'bold'
                            //     }
                            // },
                            labelLine: {
                                show: false
                            },
                            data: data
                        }
                    ]
                })
            },
            getFarmingArrangements() {
                let myChart = echarts.init(document.getElementById('FarmingArrangements'));
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        show: false,
                        data: ['农事安排', '完成']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                        top: '12%'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                        axisTick: { show: false },
                        axisLine: { show: false },
                        axisLabel: {
                            color: "#999"
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: "#E0E0E0"
                            }
                        },
                        axisTick: { show: false },
                        axisLine: { show: false },
                        axisLabel: {
                            color: "#999"
                        }
                    },
                    series: [
                        {
                            name: '农事安排',
                            type: 'line',
                            // stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
                            itemStyle: { color: "#3845BA" }
                        },
                        {
                            name: '完成',
                            type: 'line',
                            // stack: '总量',
                            data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310],
                            itemStyle: { color: "#5F76FE" }
                        }
                    ]
                })
            },
            getEwmGenerate() {
                let myChart = echarts.init(document.getElementById('ewmGenerate'));
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['生成', '扫描量'],
                        right: 100,
                        itemGap: 20,
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                        top: '18%'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
                        axisTick: { show: false },
                        axisLine: { show: false },
                        axisLabel: {
                            color: "#999"
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: "#E0E0E0"
                            }
                        },
                        axisTick: { show: false },
                        axisLine: { show: false },
                        axisLabel: {
                            color: "#999"
                        }
                    },
                    series: [
                        {
                            name: '生成',
                            type: 'line',
                            // stack: '总量',
                            areaStyle: {},
                            data: [120, 132, 220, 134, 90, 230, 210, 101, 134, 90, 230, 210],
                            itemStyle: { color: "#92A3FE" },
                            smooth: true
                        },
                        {
                            name: '扫描量',
                            type: 'line',
                            // stack: '总量',
                            areaStyle: {},
                            data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310],
                            itemStyle: { color: "#BB9AF5" },
                            smooth: true
                        }
                    ]
                })
            }
        }
    })
</script>

